<template>
  <div class="detail">
    <!-- 标题 -->
    <div class="header">
      <div class="icon" @click="goBack">
        <span class="iconfont icon-arrow-left"></span>
      </div>
      <div class="title">
        {{detailobj.title}}
      </div>
    </div>
    <!-- 中间 -->
    <div class="detailTop">
      <div class="title">
           {{detailobj.title}}
      </div>
      <div class="pic">
        <img :src="detailobj.picurl" alt="">
      </div>
    </div>
    <!-- 描述信息 -->
    <div class="description">
      {{detailobj.description}}
    </div>
    <!-- 详情内容 -->
    <div class="detaMain" v-html="detailobj.content">
    </div>
    <!-- 发布时间，阅读量等 -->
    <div class="detailInfo">
      <div class="row">
        分类:<span>{{detailobj.classid}}</span>
      </div>
      <div class="row">
        发布时间：<span>{{myDate(detailobj.posttime)}}</span>
      </div>
      <div class="row">
        阅读量:<span>{{detailobj.hits}}</span>
      </div>
    </div>
  </div>
</template>
<script>
import { detailFun, getNavFun } from '@/network/innerAxios'
import common from '@/assets/js/common'
export default {
  data () {
    return {
      detailobj: {},
      id: 0,
      cid: 0,
      type: 'img'
    }
  },
  mounted () {
    console.log(this.$route.query)
    this.id = this.$route.query.id
    this.cid = this.$route.query.cid ? this.$route.query.cid : 0
    this.type = this.$route.query.type ? this.$route.query.type : 'img'
    console.log(this.id)
    this.getDetailData()
  },
  methods: {
    // 返回上一页
    goBack () {
      this.$router.back()
    },
    // 时间戳转换
    myDate (num) {
      return common.myDate(num, 3)
    },
    async getDetailData () {
      const resData = await detailFun(this.id, this.cid, this.type)
      console.log(resData)
      const cid = resData.data.classid
      const resArr = await getNavFun()
      resArr.data.forEach(item => {
        if (item.id == cid) {
          resData.data.className = item.classname
        } else if (cid == 16) {
          resData.data.className = '文章干活'
        } else if (cid == 14) {
          resData.data.className = '灵感创意'
        }
      })
      this.detailobj = resData.data

      // .then(res=>{
      //     console.log(res);
      //     this.detailobj=res.data
      //   })
    }
  }
}
</script>
<style lang="less" scoped>
.detail{
  .header{
    height:1rem;
    background-color:#31c27c;
    color:white;
    display: flex;
    justify-content: space-between;
    align-items: center;
    text-align: center;
    .icon{
      flex: 1;
      .iconfont{
        font-size:0.7rem;
        display:block;
      }
    }
    .title{
      flex:5;
      font-size:0.4rem;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
      padding: 0 0.8rem 0 0.4rem;
      box-sizing: border-box;
    }
  }
  .detailTop{
    font-size:0.44rem;color:#333;
    display:flex;
    //text-align:justify;:两端对齐
    text-align:justify;
    padding:0.4rem 0.2rem;
    .title{
      padding-right:0.2rem;
      width:70%;
    }
    .pic{
      width:30%;
      img{
        width: 100%;
        display:block;
      }
    }
  }
  .description{
    font-size: 0.26rem;color:#888;
    padding:0.2rem 0.2rem;
    border:1px solid #efefef;
    line-height:1.8em;
  }
  .detailMain{
    padding:0.2rem;
    font-size: 0.32rem;
  }
  .detailInfo{
    font-size: 0.26rem;
    color:#999;
    padding:0.6rem 0.2rem;
    line-height:2em;
    .row{
      span{
        font-size: 0.3rem;
        color:#666;
      }
    }
  }
}

</style>
<style scoped>
.detaMain >>> img{
    width: 100%;
}
</style>
